iT邦幫忙

第 12 屆 iThome 鐵人賽
DAY 6
0
Modern Web

JavaScript 菜鳥研究室系列 第 6 篇

菜鳥日記Day 6－在地圖上增加圓圈與多邊形標示

12th鐵人賽
588 瀏覽

  • 分享至 

  • xImage
    •  

若想在地圖上畫出特殊的標記可使用圓圈(circle)與多邊形(polygon)這兩種語法
https://ithelp.ithome.com.tw/upload/images/20200919/20130039XCCpAz1j5L.png
1.設定變數circle = L.circle
2.設定圓心座標[23.488538, 120.959683]
3.設定半徑大小(公尺)，數字愈大圓圈愈大
4.設定圓圈外框的顏色color: 'red'
5.設定圓圈實心的顏色fillColor: '#f03'
6.設定圓圈實心的透明度fillOpacity: 0.5
7.將圓圈標示在地圖上.addTo(map)

https://ithelp.ithome.com.tw/upload/images/20200919/201300394IoE3vnpsw.png

  1. 設定變數let polygon = L.polygon
  2. 設定多邊形座標，四個頂點的位置分別是左上→右上→右下→左下
  3. 將多邊形標示在地圖上.addTo(map)
  4. 標示文字訊息的方法與標籤一樣，先指定變數名稱，並輸入bindPopup語法及('文字')即可

上一篇
菜鳥日記Day 5－在地圖上增加標記(marker)
下一篇
菜鳥日記Day 7－用for迴圈撈取座標資訊並增加標記
系列文
JavaScript 菜鳥研究室 共 30 篇
  1. 26
    菜鳥日記Day 26－Promise承諾
  2. 27
    菜鳥日記Day 27－setTimeout與setInterval
  3. 28
    菜鳥日記Day 28－如何為時鐘刻上數字?
  4. 29
    菜鳥日記Day 29－用Chart.js製作圖表
  5. 30
    菜鳥日記Day 30－用JSON-Server自建雲端資料庫
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22200 篇
完賽人數
602 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙